<template>
  <div>
    <el-dialog
      v-loading="loading"
      class="mt-dialog"
      :title="ip + title"
      :visible.sync="dialogVisible"
      :close-on-press-escape="false"
      top="80px"
      append-to-body
      width="1280px"
      @close="close"
    >
      <div>
        <el-tabs v-model="activeName">
          <el-tab-pane label="修改文件" name="first">
            <el-form label-width="160px" label-position="top">
              <el-form-item label="文件完整路径">
                <el-input v-model="file_path" placeholder="文件完整路径" class="input-with-select">
                  <el-button slot="append" icon="el-icon-search" @click="handleLoadFile" />
                </el-input>
              </el-form-item>
              <el-form-item v-if="content !== ''" label="内容">
                <el-input v-model="content" type="textarea" rows="20" />
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="执行命令" name="second">
            <div style="margin-top: 15px;">
              <el-autocomplete
                v-model="command"
                style="width: 90%"
                clearable
                class="inline-input"
                :fetch-suggestions="querySearch"
                placeholder="请输入命令"
              />
              <el-button slot="append" type="success" icon="el-icon-position" :loading="shellloding" @click="handleCheckCmd">执行</el-button>
            </div>
            <pre v-if="shell_response !== ''" v-loading="shellloding">{{ shell_response }}</pre>
          </el-tab-pane>
        </el-tabs>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button v-if="content !== ''" type="danger" @click="handleModify">修 改</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { LoadServerFile, WriteServerFile } from '@/api/orders/serverstatus'
import { LiveStatus } from '@/api/orders/serverstatus'
export default {
  name: 'ServerFile',
  props: ['serverstatus_id', 'root_path', 'ip', 'modelVisible'],
  data() {
    return {
      activeName: 'first',
      shellloding: false,
      command: '',
      shell_response: '',
      title: '服务器文件查看/编辑',
      dialogVisible: false,
      loading: false,
      file_path: '/data/wwwroot/',
      content: ''
    }
  },
  watch: {
    root_path(v) {
      this.file_path = v
    },
    modelVisible(v) {
      this.dialogVisible = v
      this.file_path = this.root_path
      this.command = 'ls ' + this.root_path
    }
  },
  methods: {
    querySearch(queryString, cb) {
      var restaurants = [
        { 'value': "netstat -tn 2>/dev/null | grep :443 | awk '{print $5}' | cut -d: -f1 | sort | uniq -c | sort -nr | head" },
        { 'value': 'supervisorctl status' },
        { 'value': 'supervisorctl restart all' },
        { 'value': 'ls /data/wwwlogs/' },
        { 'value': 'cd /home/gsapi;git pull;' },
        { 'value': 'cat -n 100 /var/log/gsapi-server.log' }
      ]
      var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants
      // 调用 callback 返回建议列表的数据
      cb(results)
    },
    notify(message, duration) {
      this.$notify({
        title: '成功',
        message: message,
        type: 'success',
        duration: duration || 2000
      })
    },
    handleCheckCmd() {
      this.shell_response = ''
      this.shellloding = true
      LiveStatus(this.serverstatus_id, {
        command: this.command,
        type: 'common'
      }).then(response => {
        this.shellloding = false
        this.shell_response = response.data
      }).catch(err => {
        console.log(err)
        this.shellloding = false
      })
    },
    handleLoadFile() {
      this.content = ''
      this.loading = true
      LoadServerFile(this.serverstatus_id, {
        serverstatus_id: this.serverstatus_id,
        file_path: this.file_path
      }).then(response => {
        this.loading = false
        this.content = response.data
      }).catch(err => {
        console.log(err)
        this.loading = false
      })
    },
    handleModify() {
      if (this.file_path === '' || this.file_path.indexOf('.') === -1) {
        this.notify('必须指定文件路径')
        return
      }
      if (this.content === '') {
        this.notify('文件内容不能为空')
        return
      }
      this.$confirm('确定要修改服务器文件吗' + ', 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.loading = true
        WriteServerFile(this.serverstatus_id, {
          serverstatus_id: this.serverstatus_id,
          file_path: this.file_path,
          content: this.content
        })
          .then(response => {
            this.$notify({
              title: '修改成功,请到网站检查',
              message: response.msg,
              type: 'success',
              duration: 2000
            })
            this.loading = false
          }).catch(err => {
            this.$notify({
              title: '失败',
              message: err,
              type: 'success',
              duration: 2000
            })
            this.loading = false
          })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消修改'
        })
      })
    },
    close() {
      // this.ps_product_id = ''
      // this.local_id = ''
      // this.showinfo = "display:none;"
      this.content = ''
      this.$emit('closeMyDialog', false)
    }
  }
}
</script>

<style scoped>

.top >>> .input-with-select .el-input-group__prepend {
  background-color: #fff;
}

.input-with-select {
  width: calc(100% - 200px);
}

.app-container >>> .el-dialog {
  margin-top: 48px !important;
  margin-bottom: 5px;
}

.mt-dialog >>> .el-transfer-panel {
  width: calc(50% - 60px);
}

.mt-form >>> .el-select {
  width: 100%;
}

.mt-form >>> .el-input__inner {
  width: 100%;
}

.mt-dialog >>> .el-dialog {
  margin: 10px auto !important;
}

.mt-dialog >>> .el-dialog__body {
  padding-bottom: 60px;
  padding-top: 5px;
}

.top >>> .el-select {
  width: 300px;
}
</style>
